import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Animated,
  TextInput,
  Keyboard,
} from 'react-native';

import TImage from '../../components/TImage';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';

export default class HeartLoveQuestionContentPage extends CommonListPage {
  constructor(props) {
    super(props);

    this.state.comment = "",
    this.state.keyboardHeight = 0,
    this.state.keyboardHeightAnimate = new Animated.Value(0);

    this._noEmpty = true;
    this._dataKey = "lovequestion_id";
    this._initData();
  }

  componentDidMount() {
    this._keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow.bind(this));
    this._keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this._keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide.bind(this));
    this._keyboardDidChangeListener = Keyboard.addListener('keyboardDidChangeFrame', this._keyboardDidChange.bind(this));
  }

  componentWillUnmount() {
    this._keyboardWillShowListener.remove();
    this._keyboardDidShowListener.remove();
    this._keyboardWillHideListener.remove();
    this._keyboardDidChangeListener.remove();
  }

//DqappLove_questionDetail {
  // by_avatar (string, optional): 创建用户头像 ,
  // by_name (string, optional): 创建用户名字 ,
  // by_user_id (string, optional): 创建用户ID ,
  // content (string, optional): 内容 ,
  // created_at (string, optional): 发送时间 ,
  // lovequestion_id (string, optional): 问题编号 ,
  // msgs (DqappPaging_love_msgs, optional),
  // replied_at (string, optional): 回复时间 ,
  // replier_avatar (string, optional): 回复者用户头像 ,
  // replier_id (string, optional): 回复者ID ,
  // replier_name (string, optional): 回复者名字 ,
  // reply (string, optional): 回复
  // }
  _initData() {
    this.state.questionData = this.props.pageData.routeData.questionData;
  }

  _dealEnterPage() {
    this._initData();
  }

  _getListViewStyle() {
    return {
        width:SizeUtils.getWindowSize().width,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(100)),
        backgroundColor:"#ffffff"};
  }

  _onRenderHeader() {
    return(
      <View>
        {this._renderAsker()}
        {this._renderProfesser()}
      </View>
    )
  }

  onRenderFooter() {
    return this._renderTalks();
  }

  _renderAsker() {
    return(
      <View style={{flexDirection:"column", paddingTop:SizeUtils.translateDesignHeightToCode(32),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            paddingBottom:SizeUtils.translateDesignHeightToCode(26),
          borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
        <View style={{flexDirection:"row", alignItems:"center",
            }}>
          <TImage source={{uri:this.state.questionData.by_avatar}} style={{width:28, height:28}}/>
          <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(30),
              paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>
            {this.state.questionData.by_name}
          </Text>
        </View>
        {this._renderAskerContent()}
        {this._renderAskerTimer()}
      </View>
    )
  }

  _renderAskerContent() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(24)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26),
            color:"#999999"}} >
          {this.state.questionData.content}
        </Text>
      </View>
    )
  }

  _renderAskerTimer() {
    return(
      <View >
        <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(24),
            paddingTop:SizeUtils.translateDesignWidthToCode(40), textAlign:"right"}}>
          {DateUtils.formatDate2(this.state.questionData.created_at)}
        </Text>
      </View>
    )
  }

  _renderProfesser() {
    if(this.state.questionData.replier_id == undefined || this.state.questionData.replier_id == "") {
      return;
    }
    return (
      <View style={{paddingBottom:SizeUtils.translateDesignHeightToCode(40),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            paddingTop:SizeUtils.translateDesignHeightToCode(30),
            borderTopWidth:SizeUtils.translateDesignNumToCode(3),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
            borderColor:"#eeeeee",
            flexDirection:"column",}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333",
              fontWeight:"bold"}}>
          {"专家 " + this.state.questionData.replier_name + " 回答:"}
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999", fontWeight:"bold",
            paddingTop:SizeUtils.translateDesignHeightToCode(34), }} >
          {this.state.questionData.reply}
        </Text>
        {this._renderProfesserBottom()}
      </View>
    )
  }

  _renderProfesserBottom() {
    return (
      <View style={{flexDirection:"row", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
        <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(24),}} >
          {DateUtils.formatDate2(this.state.questionData.replied_at)}
        </Text>
        <View style={{flexDirection:"row", alignItems:"center"}}>

        </View>
      </View>
    )
  }

  _renderTalks() {
    if(this.state.questionData.msgs.love_msgs === undefined) {
      return;
    }
    return (
      <View style={{backgroundColor:"#f9f9f9", paddingTop:SizeUtils.translateDesignHeightToCode(4),
            paddingBottom:SizeUtils.translateDesignHeightToCode(50),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),}}>
            {this.state.questionData.msgs.love_msgs.map(
              (data, index) =>
                {return this._renderTalkItem(data, index);}
            )}
      </View>
    )
  }

//DqappLove_msg {
// by_name (string, optional): 发送用户名字 ,
// by_user_id (string, optional): 发送用户ID ,
// content (string, optional): 内容 ,
// lovemsg_id (string, optional): 消息编号 ,
// reciever_id (string, optional): 接收用户ID ,
// reciever_name (string, optional): 接收用户名字 ,
// sent_at (string, optional): 发送时间 ,
// state (integer, optional): 状态，0未审核，1正常，2屏蔽 = ['0', '1', '2']
// }
  _renderTalkItem(data, index) {
    let name = data.by_name;
    if(data.by_user_id === this.state.questionData.by_user_id) {
      name = "楼主 : ";
    }
    else if(data.by_user_id === this.state.questionData.replier_id){
      name = "专家 : ";
    }
    return (
      <View key={index} style={{paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#333333"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#db3132"}}>
            {name}
          </Text>
          {data.content}
        </Text>
      </View>
    )
  }

  _renderCommentFooter() {
    return(
      <Animated.View style={{position:"absolute",
        bottom:this.state.keyboardHeightAnimate,
        flexDirection:"row",
        backgroundColor:"#ffffff",
        height:SizeUtils.translateDesignHeightToCode(98),
        width:SizeUtils.getWindowSize().width,
        flex:1, borderWidth:SizeUtils.translateDesignNumToCode(3),
        borderColor:"#e4e4e4", flexDirection:"row", alignItems: "center"}}>
        <TextInput
          style={{flex:1, fontSize:SizeUtils.translateFontSizeToCode(30),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            marginTop:SizeUtils.translateDesignHeightToCode(10),
            }}
          onChangeText = {(comment) => this.setState({comment})}
          placeholder = "回复专家评论"
          multiline = {false}
          onSubmitEditing = {() => this._sendComment()}
          value = {this.state.comment}
          underlineColorAndroid="transparent"
          returnKeyType = "send"
          blurOnSubmit={true}
          enablesReturnKeyAutomatically={true}
        />
      </Animated.View>
    )
  }

  _keyboardWillShow(e){
      this._setKeyboradHeight(e.endCoordinates.height);
  }

  _keyboardDidShow(e) {
      this._setKeyboradHeight(e.endCoordinates.height, 1);
  }

  _keyboardWillHide(e){
      this._setKeyboradHeight(0);
  }

  _keyboardDidChange(e) {
    // ToastUtils.show("键盘高度改变:" + e.endCoordinates.height);
  }

  _setKeyboradHeight(height, duration = 250){
      this.setState({
          keyboardHeight:height
      })
      this._playKeyboardHeightAnimate(height, duration);
      // ToastUtils.show("键盘高度:" + height);
  }

  _playKeyboardHeightAnimate(height, duration) {
    this.state.keyboardHeightAnimate.stopAnimation();
    Animated.timing(          // Uses easing functions
     this.state.keyboardHeightAnimate,    // The value to drive
     {toValue: height, duration:duration},           // Configuration
    ).start();                // Don't forget start!
  }
}
